<template>
  <el-container style="height: 100%;">
    <el-aside width="200px">
      <el-menu
        :default-active="`${activeIndex}`"
        @select="handleSelect"
        style="height: 100%;" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <h4 :style="{fontSize:'16px',color:'#303133',textAlign:'center'}">旅游后台系统</h4>
        <Divider/>
        <el-menu-item
          v-for="(item,index) in menuList"
          :index="`${index}`" :key="index"
          :style="{height: '40px',lineHeight:'40px'}"
        >
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <router-view/>
  </el-container>
</template>

<script>
  import menuList from './menuList';

  export default {
    name: "backstageManager",
    data() {
      return {
        isCollapse: false,
        menuList,
        activeIndex: 0
      };
    },
    mounted() {
      const {tag} = this.$route.meta;
      if (!!tag) {
        this.activeIndex = tag;
      }
    },
    methods: {
      handleOpen() {
        this.handleOpen = true;
      },
      handleClose() {
        this.handleOpen = false;
      },
      handleSelect(index) {
        const {path} = menuList[index];
        if (path) {
          this.$router.push(`/backstage-manager/${path}`)
        }
      }
    }
  };
</script>

<style lang="less">



</style>
